<template>
	<navigationBar title="分类"></navigationBar>
	<fixedIcon></fixedIcon>
	<view class="stxy">
		<view class="cyfl">
			<img src="/static/icon/Group 959.png" class="image" />
			<view>常用分类</view>
		</view>
		<view class="cyfl-card">
			<view class="single" v-for="(item, index) in cyfl" @click="goDetail(item)">
				{{item.name}}
				<view class="line" v-if="item.id % 4">

				</view>
			</view>
		</view>
		<view class="select">
			<van-button :color="curActive===cur.id ? '#FBB20F' : ''" v-for="cur in btns" @click="selectOne(cur.id)"
				class="btnItem">{{cur.name}}</van-button>
		</view>
		<view class="curAudios">
			<view class="audio-card" v-for="(audio,index) in audioList">
				<view class="card-left">
					<view class="audio-title">{{audio.title}}</view>
					<view class="jyms">简要描述</view>
				</view>
				<view class="card-right">
					<img src="/static/icon/bofangzanting.png" v-if="audio.id === isplay" class="icon"
						@click="pauseAudio" />
					<img src="/static/icon/bofang.png" class="icon" v-else @click="openAudio(audio)" />
					<img src="/static/icon/Star 7.png" class="icon" @click="collect" />
					<img src="/static/icon/Group 1002.png" class="icon" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBar from "/components/navigationBar.vue"
	export default {
		components: {
			navigationBar
		},
		data() {
			return {
				cyfl: [{
					id: 1,
					name: '专题配音'
				}, {
					id: 2,
					name: '广告配音'
				}, {
					id: 3,
					name: '微电影配音'
				}, {
					id: 4,
					name: '纪录片配音'
				}, {
					id: 5,
					name: '央视配音'
				}, {
					id: 6,
					name: '促销配音'
				}, {
					id: 7,
					name: '企业集团'
				}, {
					id: 8,
					name: '政府党建'
				}, {
					id: 9,
					name: '公安法院'
				}, {
					id: 10,
					name: '城市宣传'
				}, {
					id: 11,
					name: '英语'
				}, {
					id: 12,
					name: '更多'
				}],
				curActive: 0,
				btns: [{
					id: 0,
					name: '全部',
				}, {
					id: 1,
					name: '男声',
				}, {
					id: 2,
					name: '女声',
				}],
				isplay: null,
				innerAudioContext: null,
				audioList: [{
						id: 1,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '406 博物馆（历史感讲故事）'
					},
					{
						id: 2,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '001 最近的远方'
					},
					{
						id: 3,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '002 青山二中示范校片'
					},
					{
						id: 4,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '003 大阳电动车（大气自然））'
					},
					{
						id: 5,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '004 季度样音（加乐）'
					},
					{
						id: 6,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '005 人物范冬梅'
					},
					{
						id: 7,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '006 宜兴紫砂样音'
					},
					{
						id: 8,
						src: "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3",
						title: '007 缘来自在此山中'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			selectOne(id) {
				this.curActive = id;
			},
			openAudio(audio) {
				if (this.innerAudioContext) {
					try {
						this.innerAudioContext.pause();
						this.innerAudioContext.destroy()
						this.innerAudioContext = null
					} catch (e) {
						//TODO handle the exception
					}
				}
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.isplay = audio.id;
				this.innerAudioContext.src = audio.src;
			},
			pauseAudio() {
				this.innerAudioContext.pause();
				this.isplay = null;
			},
			goDetail(item) {
				if (item.name === '更多') {
					uni.navigateTo({
						url: '/pages/moreFL/index'
					})
				} else {
					uni.navigateTo({
						url: `/pages/showAudioList/index?data=${item.name}`
					})
				}
			},
			collect() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #F5F5F5;
		/* margin: 0;
		padding: 0;
		overflow: hidden; */
	}

	.stxy {
		display: flex;
		flex-direction: column;
		padding: 0 10px;
		background-color: rgb(248, 248, 248);
		height: calc(100vh - 180rpx)
	}

	.cyfl {
		display: flex;
		gap: 10px;
		margin: 20rpx 0;
	}

	.image {
		width: 20px;
		height: 20px;
	}

	.cyfl-card {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 15rpx;
		font-size: 28rpx;
	}

	.single {
		position: relative;
		display: flex;
		width: 22%;
		padding: 15rpx 10rpx;
		justify-content: center;
		border-bottom: 2rpx solid #eee;
	}

	.line {
		position: absolute;
		right: 0;
		width: 2rpx;
		height: 50%;
		background-color: #eee;
	}

	.select {
		display: flex;
		gap: 20rpx;
		margin: 20rpx 0;
	}

	.btnItem {
		flex: 1;
		height: 70rpx;
		color: #B0B0B9;
		font-weight: 500;
		font-size: 30rpx;
		background-color: #F5F5F5;
	}

	.curAudios {
		flex: 1;
		overflow: scroll;
	}

	.audio-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 15rpx;
		margin-bottom: 15rpx;
		border-radius: 10rpx;
	}

	.card-left {
		flex: 1;
		overflow: hidden;
	}

	.card-right {
		display: flex;
		justify-content: flex-end;
		flex: 1;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
	}

	.audio-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 10rpx;
	}

	.jyms {
		font-size: 24rpx;
		color: #B0B0B9;
	}
</style>